<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增档案</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="/js/auth.js"></script>
</head>
<body style="background-color: #f5f5f5">
<div class="container">

    <div id="app" style="background-color: white;width: 1000px;height: 700px;text-align: center;margin: auto;">
        <div style="margin: 10px;background-color: plum">
            <span style="color: #00F7DE;font-size:30px ">档案查找</span>
        </div>
        <div class="input-group input-group-lg" style="margin: auto;padding-top: 5px">
					<span class="input-group-addon">姓名：
					</span>
            <input type="text" id="getname" class="form-control" v-model="name">
        </div>
        <div class="input-group input-group-lg" style="margin: auto;padding-top: 5px">
					<span class="input-group-addon">年龄：
					</span>
            <input type="text" id="getage" class="form-control" v-model="age">
        </div>
        <div class="input-group input-group-lg" style="margin: auto;padding-top: 5px">
					<span class="input-group-addon">电话：
					</span>
            <input type="text" id="getphone" class="form-control" v-model="phone">
        </div>
        <div class="input-group input-group-lg" style="margin: auto;padding-top: 5px">
					<span class="input-group-addon">邮箱：
					</span>
            <input type="text" id="getmail" class="form-control" v-model="mail">
        </div>

        <br/>
        <button type="button" class="btn btn-success" style="width: 100px" @click="send()">查找</button>
        <br/><br/>
        <div>
            <button type="button" class="btn btn-primary" style="width: 100px" @click="">增加档案</button>
            <button type="button" class="btn btn-info" style="width: 100px" @click="">修改档案</button>
            <button type="button" class="btn btn-warning" style="width: 100px" @click="">批量删除</button>
            <button type="button" class="btn btn-danger" style="width: 100px" @click="del()">批量删除</button>
        </div>

        <div >
        <table v-if="profiles!=null" class="table table-striped">
            <thead>
            <tr>
                <td>账号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>电话</td>
                <td>邮箱</td>
                <td>选择</td>
            </tr>

            </thead>
            <tbody>
            <tr v-for="profile in profiles">
                <td>{{profile.uid}}</td>
                <td>{{profile.uname}}</td>
                <td>{{profile.age}}</td>
                <td>{{profile.phone}}</td>
                <td>{{profile.mail}}</td>
                <td><input type="checkbox" @change="select($event,profile.uid)"/></td>
            </tr>

            </tbody>
        </table>
        </div>
        <div>
            <button @click="prevPage()">上一页</button>
            <span>第{{currentPage}}页/共{{totalPage}}页</span>
            <button @click="nextPage()">下一页</button>
        </div>
    </div>

</div>
<script type="text/javascript">
    let p = {headers}
    new Vue({
        el: "#app",
        data: {
            profiles:[],
            batch:[],
            name: "",
            age: "",
            phone: "",
            mail: "",
            pp:"1",
            currentPage:"",
            totalPage:""
        },
        methods: {
            send: function () {
                axios.post(
                    "/profile/profile/condition",{
                        "uname": this.name,
                        "age": this.age,
                        "phone": this.phone,
                        "mail": this.mail,
                        "p":this.pp
                    },p
                ).then(res => {
                    console.info(res.data.data);
                    console.info(this.batch);
                    this.profiles=res.data.data.data;
                    this.currentPage=res.data.data.page;
                    this.totalPage=res.data.data.totalPage;
                });
            },
            //上一页
            prevPage:function() {
                //console.log(this.currentPage);
                if (this.currentPage == 1) return;

                this.currentPage--;
                console.info(this.currentPage);
                /*var params=new URLSearchParams();
                params.append("p",this.currentPage);*/
                axios.post(
                    "/profile/profile/condition",{
                        "uname": this.name,
                        "age": this.age,
                        "phone": this.phone,
                        "mail": this.mail,
                        "p":this.currentPage
                    },p
                ).then(res=>{ //res返回的结果 res=> 得到的结果执行这里面的操作
                    this.profiles=res.data.data.data;
                    this.currentPage=res.data.data.page;
                    this.totalPage=res.data.data.totalPage;
                    this.pageSize=res.data.data.pageSize;
                });

            },
            // 下一页
            nextPage:function() {
                if (this.currentPage == this.totalPage)return ;

                this.currentPage++;
                console.info(this.currentPage);
                /*var params=new URLSearchParams();
                params.append("p",this.currentPage);*/
                axios.post(
                    "/profile/profile/condition",{
                        "uname": this.name,
                        "age": this.age,
                        "phone": this.phone,
                        "mail": this.mail,
                        "p":this.currentPage
                    },p
                ).then(res=>{ //res返回的结果 res=> 得到的结果执行这里面的操作
                    this.profiles=res.data.data.data;
                    this.currentPage=res.data.data.page;
                    this.totalPage=res.data.data.totalPage;
                    this.pageSize=res.data.data.pageSize;
                });
            },
            select:function ($event,uid) {
                if($event.target.checked){
                    this.batch.push(uid);
                }else {
                    var idx1=this.batch.indexOf(uid);
                    this.batch.splice(idx1,1);
                }
            },
            del:function () {
                //alert(this.batch);
                let para=JSON.stringify(this.batch);
                axios.post(
                    "/profile/profile/deletebatch",this.batch
                    ,p
                ).then(res=>{
                    console.info(res.data);
                });
            }
        }
    });
</script>
</body>
</html>